<template>
  <el-row>
    <el-col>
      <el-card>
        <!--搜索框开始-->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-button type="success" style="margin-bottom: 10px;" @click="showAddModel">新增</el-button>
          </el-col>
          <el-col :span="16">
            <div class="m-4">
              <div class="block" style="float: right; margin-right: 10px;">
                <el-select
                    v-model="condition.status"
                    placeholder="请选择是否推荐"
                    clearable
                    :value-on-clear=null
                    style="width: 150px"
                    @change="selectByPage(1)"
                >
                  <el-option   label="营业" value="1" />
                  <el-option  label="闭馆" value="0" />
                </el-select>
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-cascader
                    placeholder="请选择分类"
                    v-model="condition.categoryId"
                    :options="allParent"
                    :props="props"
                    clearable
                    :value-on-clear=null
                    @change="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.name"
                    placeholder="请选择景区名称"
                    clearable
                    @change="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
            </div>
          </el-col>
        </el-row>
        <!--搜索框结束-->
        <!--表格开始-->
        <el-table :data="pageInfo.list" border style="width: 100%;">
          <el-table-column prop="id" label="ID" :width="50" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="ticketPrice" label="门票售价" />
          <el-table-column prop="openTime" label="开放时间" />
          <el-table-column prop="recommendDuration" label="游玩时长" />
          <el-table-column prop="tags" label="特色标签" />
          <el-table-column prop="suitableFor" label="适合人群" />
          <el-table-column label="分类">
            <template #default="scope">
              <el-text class="mx-1" type="primary">
                {{scope.row.category.name}}
              </el-text>
            </template>
          </el-table-column>
          <el-table-column prop="recom" label="是否推荐">
            <template #default="scope">
              <el-switch v-model="scope.row.isRecommended"
                         inline-prompt
                         :inactive-value="0"
                         :active-value="1"
                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                         inactive-text="不推荐"
                         active-text="推荐"
                         @change="changeRecom(scope.row.id, scope.row.isRecommended, scope.row.status)"
              >

              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="是否营业">
            <template #default="scope">
              <el-switch v-model="scope.row.status"
                         inline-prompt
                         :inactive-value="0"
                         :active-value="1"
                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                         inactive-text="闭馆"
                         active-text="营业中"
                         @change="chgStatus(scope.row.id, scope.row.isRecommended,scope.row.status)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="dscp" label="描述" />
          <el-table-column label="图片" width="110px">
            <template #default="scope">

              <el-popover placement="right" trigger="hover" v-if="scope.row.picList.length > 0">
                <template #reference>
                  <el-image style="width: 80px; height: 80px" :src="SERVER_ADDR + '/scenicSpot/pic/' + scope.row.picList[0].url" />
                </template>
                <el-image v-for="(pic, index) in scope.row.picList" :key="index" style="width: 50px; height: 50px; margin-left: 5px" :src="SERVER_ADDR + '/scenicSpot/pic/' + pic.url" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" :width="227">
            <template #default="scope">
              <el-button type="success" style="margin-bottom: 10px" @click="showDetailModel(scope.row)"> 详情</el-button>
              <el-button type="warning" style="margin-bottom: 10px" @click="showRouteModel(scope.row)"> 路线</el-button>
              <el-button type="primary" style="margin-bottom: 10px" @click="showUpdateModel(scope.row.id)"> 修改</el-button>
              <el-popconfirm
                  title="你确定删除吗？"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  @confirm="deleteGoods(scope.row.id)"
              >
                <template #reference>
                  <el-button style="margin-bottom: 10px;" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--表格结束-->
        <!-- 分页开始 -->
        <el-row class="row-bg" justify="center">
          <el-pagination background layout="prev, pager, next"
                         :page-count="pageInfo.pages"
                         @update:current-page="selectByPage"
                         style="margin-top: 10px;"
                         v-model:current-page="pageInfo.pageNum" />
        </el-row>
        <!-- 分页结束 -->
      </el-card>
    </el-col>
  </el-row>
  <!-- 新增景点对话框开始 -->
  <el-dialog v-model="addDialogShow" title="新增景点" width="800">
    <el-form>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="名称" label-width="20%">
            <el-input v-model="scenicSpotAdd.name" autocomplete="off" placeholder="请输入名称" style="width: 240px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" label-width="20%">
            <el-input v-model="scenicSpotAdd.contactTel" autocomplete="off" placeholder="请输入联系电话" style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="地址" label-width="11%">
            <el-select v-model="scenicSpotAdd.addr.province" placeholder="请选择省" style="width: 120px; margin-right: 10px" @change="(val) => selectProvince(val,'add')">
              <el-option
                  v-for="(province, index) in pcas"
                  :key="index"
                  :value="province.name"
              />
            </el-select>
            <el-select v-model="scenicSpotAdd.addr.city" placeholder="请选择市" style="width: 120px; margin-right: 10px" @change="(val) => selectCity(val, 'add')">
              <el-option
                  v-for="(city, index) in province.children"
                  :key="index"
                  :value="city.name"
              />
            </el-select>
            <el-select v-model="scenicSpotAdd.addr.district" placeholder="请选择区县" style="width: 120px; margin-right: 10px" @change="(val) => selectDistrict(val, 'add')">
              <el-option
                  v-for="(district, index) in city.children"
                  :key="index"
                  :value="district.name"
              />
            </el-select>
            <el-select v-model="scenicSpotAdd.addr.street" placeholder="请选择区县" style="width: 120px; margin-right: 10px">
              <el-option
                  v-for="(street, index) in district.children"
                  :key="index"
                  :value="street.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="详细地址" label-width="20%">
            <el-mention
                placeholder="请输入详细地址"
                v-model="scenicSpotAdd.addr.address"
                type="textarea"
                style="width: 200px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮政编码" label-width="20%">
            <el-input
                v-model="scenicSpotAdd.addr.postCode"
                autocomplete="off"
                placeholder="请输入邮政编码"
                style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="门票价格" label-width="20%">
            <el-input v-model="scenicSpotAdd.ticketPrice" autocomplete="off" placeholder="请输入门票价格" style="width: 240px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开放时间" label-width="20%">
            <el-input v-model="scenicSpotAdd.openTime" autocomplete="off" placeholder="请输入开放时间" style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="描述" label-width="20%">
            <el-input v-model="scenicSpotAdd.description" autocomplete="off" placeholder="请输入描述" style="width: 240px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="游玩时长" label-width="20%">
            <el-input v-model="scenicSpotAdd.recommendDuration" autocomplete="off" placeholder="请输入游玩时长,例如6h" style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="特色标签" label-width="20%">
            <el-input v-model="scenicSpotAdd.tags" autocomplete="off" placeholder="请输入特色标签" style="width: 240px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="适合人群" label-width="20%">
            <el-input v-model="scenicSpotAdd.suitableFor" autocomplete="off" placeholder="请输入适合人群" style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="是否推荐" label-width="20%">
            <el-radio-group v-model="scenicSpotAdd.isRecommended">
              <el-radio label="推荐" value="0" size="large"/>
              <el-radio label="不推荐" value="1" size="large"/>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否营业" label-width="20%">
            <el-radio-group v-model="scenicSpotAdd.status">
              <el-radio label="营业" value="0" size="large"/>
              <el-radio label="闭馆" value="1" size="large"/>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="10">
          <el-form-item label="类型" label-width="20%">
            <el-cascader
                placeholder="请选择分类"
                v-model="scenicSpotAdd.categoryId"
                :options="allParent"
                :props="props"
                clearable
                :empty-values="[0]"
                :value-on-clear="0"
                @change="selectByPage(1)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="图片" label-width="20%">
            <el-upload v-model:file-list="scenicSpotAdd.picList"
                       :action="SERVER_ADDR + '/scenicSpot/upload'"
                       list-type="picture-card"
                       name="pic"
                       :headers="headers"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload"
            >
              <el-icon >
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">取消</el-button>
        <el-button type="primary" @click="insert">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增景点对话框结束 -->
  <!-- 修改景点对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改景点" width="800">
  <el-form>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="名称" label-width="20%">
          <el-input v-model="scenicSpotUpdate.name" autocomplete="off" placeholder="请输入名称" style="width: 240px" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话" label-width="20%">
          <el-input v-model="scenicSpotUpdate.contactTel" autocomplete="off" placeholder="请输入联系电话" style="width: 240px" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="24">
        <el-form-item label="地址" label-width="11%">
          <el-select v-model="scenicSpotUpdate.addr.province" placeholder="请选择省" style="width: 120px; margin-right: 10px" @change="(val) => selectProvince(val, 'update')">
            <el-option
                v-for="(province, index) in pcas"
                :key="index"
                :value="province.name"
                :method="update"
            />
          </el-select>
          <el-select v-model="scenicSpotUpdate.addr.city" placeholder="请选择市" style="width: 120px; margin-right: 10px" @change="(val) => selectCity(val, 'update')">
            <el-option
                v-for="(city, index) in province.children"
                :key="index"
                :value="city.name"
            />
          </el-select>
          <el-select v-model="scenicSpotUpdate.addr.district" placeholder="请选择区县" style="width: 120px; margin-right: 10px" @change="(val) => selectDistrict(val, 'update')">
            <el-option
                v-for="(district, index) in city.children"
                :key="index"
                :value="district.name"
            />
          </el-select>
          <el-select v-model="scenicSpotUpdate.addr.street" placeholder="请选择区县" style="width: 120px; margin-right: 10px">
            <el-option
                v-for="(street, index) in district.children"
                :key="index"
                :value="street.name"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="详细地址" label-width="20%">
          <el-mention
              placeholder="请输入详细地址"
              v-model="scenicSpotUpdate.addr.address"
              type="textarea"
              style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮政编码" label-width="20%">
          <el-input
              v-model="scenicSpotUpdate.addr.postCode"
              autocomplete="off"
              placeholder="请输入邮政编码"
              style="width: 240px" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="门票价格" label-width="20%">
          <el-input v-model="scenicSpotUpdate.ticketPrice" autocomplete="off" placeholder="请输入门票价格" style="width: 240px" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开放时间" label-width="20%">
          <el-input v-model="scenicSpotUpdate.openTime" autocomplete="off" placeholder="请输入开放时间" style="width: 240px" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="描述" label-width="20%">
          <el-input v-model="scenicSpotUpdate.description" autocomplete="off" placeholder="请输入描述" style="width: 240px" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="游玩时长" label-width="20%">
          <el-input v-model="scenicSpotUpdate.recommendDuration" autocomplete="off" placeholder="请输入游玩时长,例如6h" style="width: 240px" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="特色标签" label-width="20%">
          <el-input v-model="scenicSpotUpdate.tags" autocomplete="off" placeholder="请输入特色标签" style="width: 240px" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="适合人群" label-width="20%">
          <el-input v-model="scenicSpotUpdate.suitableFor" autocomplete="off" placeholder="请输入适合人群" style="width: 240px" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-form-item label="是否推荐" label-width="20%">
          <el-radio-group v-model="scenicSpotUpdate.isRecommended">
            <el-radio label="推荐" :value=0 size="large"/>
            <el-radio label="不推荐" :value=1 size="large"/>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否营业" label-width="20%">
          <el-radio-group v-model="scenicSpotUpdate.status">
            <el-radio label="营业" :value=0 size="large"/>
            <el-radio label="闭馆" :value=1 size="large"/>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="10">
        <el-form-item label="类型" label-width="20%">
          <el-cascader
              placeholder="请选择分类"
              v-model="scenicSpotUpdate.categoryId"
              :options="allParent"
              :props="props"
              clearable
              :empty-values="[0]"
              :value-on-clear="0"
              @change="selectByPage(1)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="14">
        <el-form-item label="图片" label-width="20%">
          <el-upload v-model:file-list="scenicSpotUpdate.picList"
                     :action="SERVER_ADDR + '/scenicSpot/upload'"
                     list-type="picture-card"
                     name="pic"
                     :headers="headers"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload"
          >
            <el-icon >
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="updateDialogShow = false">取消</el-button>
      <el-button type="primary" @click="update">
        确定
      </el-button>
    </div>
  </template>
  </el-dialog>
  <!-- 修改景点对话框结束 -->
  <!-- 景点详情对话框开始 -->
  <el-dialog v-model="detailDialogShow" title="景点详情">
    <template #footer>
        <div  v-if="detailDialogShow" style="border: 1px solid #ccc; margin-bottom: 5px;">
          <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <el-form-item label="内容">
            <QuillEditor v-model="scenicSpotUpdate.detail" />
          </el-form-item>
        </div>
        <el-button @click="detailDialogShow = false">取消</el-button>
        <el-button type="primary" @click="updateDetail">
          确定
        </el-button>
    </template>
  </el-dialog>
  <!-- 景点详情对话框开始 -->
  <el-dialog v-model="routeDislogShow" title="景点详情">
    <template #footer>
      <div  v-if="routeDislogShow" style="border: 1px solid #ccc; margin-bottom: 5px;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <el-form-item label="内容">
          <QuillEditor v-model="scenicSpotUpdate.route" />
        </el-form-item>
      </div>
      <el-button @click="routeDislogShow = false">取消</el-button>
      <el-button type="primary" @click="updateRoute">
        确定
      </el-button>
    </template>
  </el-dialog>
  <!-- 景点详情对话框结束 -->
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {ref,onBeforeUnmount, shallowRef, computed} from "vue";
import {ElMessage} from "element-plus";
import scenicSpotApi from "@/api/scenicSpotApi.js";
import categoryApi from "@/api/categoryApi.js";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import {useTokenStore} from "@/stores/tokenStore.js";
import pcas from "@/stores/pcas-code.json";
import {Plus} from "@element-plus/icons-vue";
import QuillEditor from "@/components/common/QuillEditor.vue"

const tokenStore = useTokenStore();
const headers = computed(() => {
  const token = tokenStore.tokenStr;
  return{
    token: token
  }
})
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//修改详情开始
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 设置wangEditor的内容
const mode = ref('default');
//工具栏的设置
const toolbarConfig = {}
//对话框的配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage:{
      server: `${SERVER_ADDR.value}/scenicSpot/upload`,
      fieldName: "pic",
      headers: {
        token: tokenStore.tokenStr
      },
      customInsert(resp, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        let url = `${SERVER_ADDR.value}/scenicSpot/pic/${resp.data}`;
        //url - 图片通过后台访问的地址
        insertFn(url);
      },
    }
  }
}
// 设置新增景区
const scenicSpotAdd = ref({
  name: null,
  description: null,
  addr: {
    province: null,
    city: null,
    district: null,
    street: null,
    address: null,
    postCode: null,
  },
  ticketPrice: null,
  openTime: null,
  recommendDuration: null,
  suitableFor: null,
  isRecommended: null,
  status: null,
  picList: [],
  detail: null,
  categoryId: null,
  contactTel: null,
});
// 设置新建景点对话框的显示
const addDialogShow = ref(false);
// 设置修改景点对话框的显示
const updateDialogShow = ref(false);
// 设置景点详细对话框显示
const detailDialogShow = ref(false);
// 设置路线规划对话框显
const routeDislogShow = ref(false);
// 设置修改景区
const scenicSpotUpdate = ref({
  id: null,
  name: null,
  description: null,
  addr: {
    province: null,
    city: null,
    district: null,
    street: null,
    address: null,
    postCode: null,
  },
  addrId: null,
  ticketPrice: null,
  openTime: null,
  recommendDuration: null,
  suitableFor: null,
  isRecommended: null,
  status: null,
  picList: [],
  detail: null,
  route: null,
  categoryId: null
});
//是否让添加的对话框显示
const  addList = ref([]);
//选中的省
const province = ref({});
//选中的市
const city = ref({});
//选中的区镇
const district = ref({});

//省被选中之后调用
const selectProvince = (value, method) => {
  city.value = {};
  district.value = {};
  if (method === 'add'){
    scenicSpotAdd.value.addr.city = '';
    scenicSpotAdd.value.addr.district = '';
    scenicSpotAdd.value.addr.street = '';
  }else if (method === 'update'){
    scenicSpotUpdate.value.addr.city = '';
    scenicSpotUpdate.value.addr.district = '';
    scenicSpotUpdate.value.addr.street = '';
  }
  pcas.forEach(p => {
    if (p.name == value) {
      province.value = p;
    }
  })
}
//市被选中之后调用
const selectCity = (value, method) => {
  district.value = {};
  if (method === 'add'){
    scenicSpotAdd.value.addr.district = '';
    scenicSpotAdd.value.addr.street = '';
  }else if (method === 'update'){
    scenicSpotUpdate.value.addr.district = '';
    scenicSpotUpdate.value.addr.street = '';
  }
  province.value.children.forEach(c => {
    if (c.name == value) {
      city.value = c;
    }
  })
}
//街道被选中之后调用
const selectDistrict = (value, method) => {
  if (method === 'add'){
    scenicSpotAdd.value.addr.street = '';
  }else if (method === 'update'){
    scenicSpotUpdate.value.addr.street = '';
  }
  city.value.children.forEach(d => {
    if (d.name == value) {
      district.value = d;
    }
  })
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
//分页的信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
const condition = ref({
  name: null,
  categoryId: null,
});
// 请求所有的数据
const selectByPage = (PageNum) => {
  scenicSpotApi.selectByPage(condition.value, PageNum, 10)
      .then(resp => {
        pageInfo.value =resp.data
      })
}
//级联选择器的配置选择
const props = ref({
  label: "name",
  value: "id",
  children: "childList",
  emitPath: false
})
//父分类
const allParent = ref([]);
//获取所有的父分类
const selectAllParent = () =>{
  categoryApi.selectAllParent()
      .then(resp => {
        allParent.value = resp.data;
      })
}
// 新建景点对话框显示
const showAddModel = ()=>{
  addDialogShow.value = true;
}
// 新建景点
const insert = ()=>{
  scenicSpotApi.insert(scenicSpotAdd.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          addDialogShow.value = false;
          selectByPage(1);
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
// 修改景点对话框显示
const showUpdateModel = (id) =>{
  scenicSpotApi.selectById(id)
      .then(resp => {
        scenicSpotUpdate.value = resp.data;
        console.log(typeof resp.data.status)
        // 处理四级地区回显
        x:for (let p of pcas) {
          if (p.name === scenicSpotUpdate.value.addr.province) {
            province.value = p;
            for (let c of province.value.children) {
              if (c.name === scenicSpotUpdate.value.addr.city) {
                city.value = c;
                for (let d of city.value.children) {
                  if (d.name === scenicSpotUpdate.value.addr.district) {
                    district.value=d;
                    for (let s of d.children) {
                      if (s.name === scenicSpotUpdate.value.addr.street) {
                        scenicSpotUpdate.value.addr.street = s.name;
                        break x;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        //处理图片
        for (let i = 0; i < scenicSpotUpdate.value.picList.length; i++) {
          //保存图片真实的名字
          scenicSpotUpdate.value.picList[i].realName = scenicSpotUpdate.value.picList[i].url;
          scenicSpotUpdate.value.picList[i].url = `${SERVER_ADDR.value}/scenicSpot/pic/${scenicSpotUpdate.value.picList[i].url}`;
        }
        updateDialogShow.value=true;

      })
}
// 修改景点
const update = ()=>{
  scenicSpotApi.update(scenicSpotUpdate.value)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg);
          updateDialogShow.value = false;
          selectByPage(1);
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//修改推荐
const changeRecom = (id, isRecommended, status) =>{
  const scenicSpot = {
    id: id,
    isRecommended: isRecommended,
    status: status,
  }
  scenicSpotApi.update(scenicSpot)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum)
        }else{
          ElMessage.error(resp.msg);
        }
      })
}
//修改上下架
const chgStatus = (id, isRecommended,status) => {
  const scenicSpot = {
    id: id,
    isRecommended: isRecommended,
    status: status,
  }
  scenicSpotApi.update(scenicSpot)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum)
        }else{
          ElMessage.error(resp.msg);
        }
      })
}
//图片上传的钩子函数
const  handleAvatarSuccess = (response, uploadFile) => {
  if (response.code == 10000) {
    ElMessage.success(response.msg);
    uploadFile.url = `${SERVER_ADDR.value}/scenicSpot/pic/${response.data}`;
    uploadFile.realName = response.data;
  }else {
    ElMessage.error(response.msg);
  }
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('只能上传jpg格式的图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 1) {
    ElMessage.error('图片大小不能超过1MB')
    return false
  }
  return true
}
// 显示详情对话框
const showDetailModel = (row) => {
  scenicSpotUpdate.value = row;
  detailDialogShow.value = true;
};
// 显示路线对话框对话框
const showRouteModel = (row) => {
  scenicSpotUpdate.value = row;
  routeDislogShow.value = true;
};
// 修改景点详情
const updateDetail = () => {
  const scenicSpot = {
    id: scenicSpotUpdate.value.id,
    detail: scenicSpotUpdate.value.detail,
  };
  scenicSpotApi.update(scenicSpot).then(resp => {
    if (resp.code == 10000) {
      ElMessage.success(resp.msg);
      detailDialogShow.value = false;
    }else {
      ElMessage.error(resp.msg);
    }
  })
}

// 修改路线详情
const updateRoute = () => {
  const scenicSpot = {
    id: scenicSpotUpdate.value.id,
    route: scenicSpotUpdate.value.route,
  };
  scenicSpotApi.update(scenicSpot).then(resp => {
    if (resp.code == 10000) {
      ElMessage.success(resp.msg);
      routeDislogShow.value = false;
    }else {
      ElMessage.error(resp.msg);
    }
  })
}
selectAllParent();
selectByPage(1)
</script>

<style scoped>

</style>